---
import Layout from '../components/Layout.astro';
---
<Layout>
	<section>
		<p id="name">Replace Main Section</p>
		<p>This is the main section</p>
	</section>
	<a id="click" href="/keep-two">go to next page</a>
</Layout>
<script>
	import { deselectScripts, saveFocus, swapBodyElement, swapHeadElements, swapRootAttributes } from "../../node_modules/astro/dist/transitions/swap-functions"

	document.addEventListener('astro:before-swap', (e) => {
		e.swap = () => replaceMain(e.newDocument)
	});

	function replaceMain(doc:Document){
		deselectScripts(doc);
		swapRootAttributes(doc);
		swapHeadElements(doc);
		const restoreFocusFunction = saveFocus();
		{
			const newMain = doc.body.querySelector('main section');
				const oldMain = document.body.querySelector('main section');
				if (newMain && oldMain) {
					swapBodyElement(newMain, oldMain);
				} else {
					swapBodyElement(doc.body, document.body);
				}
		}
		restoreFocusFunction();
	}
</script>
